<template>
    <div class="water_list">
        <ul v-for="col in cols" :key="col.id" class="item">
            <li v-for="item in col.imgs" :key="item.designTemplateId">
                <router-link :to="'/detail/'+item.designTemplateId">
                    <img
                        v-lazy="item.img"
                        :style="{ height: item.imgH }"
                        alt=""
                    />
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props: ["list"],
    data() {
        return {
            cols: [],
            myList: [],
        };
    },
    created() {
        this.myList = this.list;
        this.water();
    },
    methods: {
        water() {
            // 生成初识数据 记录没列包含的图片集合
            for (let j = 0; j < 2; j++) {
                this.cols.push({
                    id: j + 1,
                    h: 0,
                    imgs: [],
                });
            }
            // 分拣图片
            for (let i = 0; i < this.myList.length; i++) {
                // 找出最低的
                this.cols.sort((a, b) => (a.h > b.h ? 1 : -1));
                // 算出当前图片占位高度
                let H =
                    (parseInt(this.myList[i].height) /
                        parseInt(this.myList[i].width)) *
                    3.5;
                this.cols[0].h += H + 0.4; //叠加高度
                let imgUrl =
                    "http:" +
                    this.myList[i].designTemplateThumbUrls[0] +
                    "?x-oss-process=image/resize,w_300/format,jpg";
                this.cols[0].imgs.push({
                    designTemplateId:this.myList[i].designTemplateId,
                    img: imgUrl,
                    imgH: H + "rem",
                });
            }
            if (this.cols[0].id != 1) {
                //确保id==1 是第一列
                this.cols.reverse();
            }
            if (this.cols[0].imgs.length === 0) {
                this.cols.reverse();
            }
            // console.log(this.cols);
        },
    },
    watch: {
        list: {
            deep: true,
            handler() {
                this.myList = this.list;
                // console.log(this.myList);
                this.cols = [];
                this.water();
            },
        },
    },
};
</script>
<style lang="scss" scoped>
.water_list {
    // background-color: skyblue;
    display: flex;
    justify-content: space-between;
    padding: 0.2rem;
    .item {
        width: 3.5rem;
        border-radius: 0.1rem;
        li {
            margin: 0.2rem 0.1rem;
            img {
                width: 100%;
                display: block;
                border-radius: 0.1rem;
                border: 0.02rem solid #e6e6e6;
            }
        }
    }
}
</style>